<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>

精简图：

     download html

download css                 download js

css rules tree(construct)    domAPI  
                             domTree
                             
cssrulestree                cssomAPI
                            cssomTree

    domtree     cssomTree


        renderTree

            |
            |

         layout（布局）---- > paint（绘制）
        

        多层矢量图  ----->  实际绘制（栅格化，实际显示像素化）

        绘制会消耗cpu，但是绘制本来是gpu的擅长
        google chrome 会自动使用 gpu，但是目前各家浏览器都已经很先进了，具体看情况


        如果js动态操作dom，
        reflow    重排，重排必然导致重绘   
        repaint   重绘






                                相当于
    浏览器刷新页面的频率1s 60s  -------->  刷新一次页面/16.7mm

    如果gpu可以再一帧里渲染好页面，那么当你改动页面的元素或者实现动画的时候，将会非常流畅


</body>
</html>